﻿@{
    Layout = null;

}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Markdown Editor</title>
    <!-- 引入Editor.md的CSS文件 -->
    <link rel="stylesheet" href="~/editor.md-master/css/editormd.min.css" />
    <style>
        /* 设置编辑器的高度 */
        #editor {
            width: 100%;
            height: 500px;
        }
        /* 设置文本显示区域的样式 */

   .sourceMaterial {  
        display: flex; /* 设置为Flex容器 */  
        list-style-type: none; /* 移除默认的列表样式 */  
        padding: 0; /* 移除默认的padding */  
    }  
    .sourceMaterial li {  
        style=" font-size: 8px; "
        margin-right: 10px; /* 添加右侧间距，可选 */  
    }  
    /* 如果需要图片与文本垂直居中，可以为li设置align-items */  
    .sourceMaterial li {  
        display: flex;  
        align-items: center; /* 垂直居中 */  
    }  
    .sourceMaterial li img {  
        max-width: 100px; /* 示例：限制图片最大宽度 */  
        height: auto; /* 保持图片比例 */  
        margin-right: 5px; /* 图片与文本之间的间距，可选 */  
    }

        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        h2, h1 {
            text-align: center;
            margin: 20px 0;
        }

        .news-id {
            font-weight: normal;
        }

        .content {
            max-width: 800px;
            width: 100%;
            padding: 20px;
            box-sizing: border-box;
        }

        .sourceMaterial {
            list-style: none;
            padding: 0;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 10px;
        }

            .sourceMaterial li {
                margin: 10px;
            }

        .sourceMaterialImg {
            max-width: 100%;
            height: auto;
            border: 1px solid #ddd;
            border-radius: 4px;
            padding: 5px;
            transition: all 0.3s ease;
        }

            .sourceMaterialImg:hover {
                box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
            }

        .center-text {
            text-align: center;
            margin: 20px 0;
        }

        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        h2, h1 {
            text-align: center;
            margin: 20px 0;
        }

        .news-id {
            font-weight: normal;
        }

        .content {
            max-width: 800px;
            width: 100%;
            padding: 20px;
            box-sizing: border-box;
        }

        .sourceMaterial {
            list-style: none;
            padding: 0;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 10px;
        }

            .sourceMaterial li {
                margin: 10px;
            }

        .sourceMaterialImg {
            max-width: 100%;
            height: auto;
            border: 1px solid #ddd;
            border-radius: 4px;
            padding: 5px;
            transition: all 0.3s ease;
        }

            .sourceMaterialImg:hover {
                box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
            }

        .center-text {
            text-align: center;
            margin: 20px 0;
        }


        #get-text-btn {
            background-color: #3498db;
            border: none;
            color: white;
            padding: 10px 20px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            margin: 4px 2px;
            cursor: pointer;
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
            border-radius: 4px;
        }

            #get-text-btn:hover {
                background-color: #2980b9;
                box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
            }
    </style>
</head>
<body>
    <div class="content">
        <h2>博客文章序号：<span class="news-id">@ViewData["NewsId"]</span></h2>
        <h1>@ViewData["NewsTitle"]</h1>
        <p class="center-text">点击图片复制图片素材！</p>

        @{
            var myList = ViewData["ImagesList"] as List<string>;
            if (myList != null)
            {
                <ul class="sourceMaterial">
                    @foreach (var item in myList)
                    {
                        <li>
                            <img src="@item" alt="@item" class="sourceMaterialImg" />
                        </li>
                    }
                </ul>
            }
        }
    </div>
    <!-- 创建Markdown编辑器的容器 -->
    <div id="editor">
        <textarea style="display:none;"></textarea>
    </div>

    <!-- 按钮 -->
    <button id="get-text-btn">点击发布</button>


    <!-- 引入jQuery -->
    <script src="~/lib/jq.js"></script>
    <!-- 引入Editor.md的JS文件 -->
    <script src="~/editor.md-master/editormd.min.js"></script>

    <!-- 初始化Editor.md编辑器 -->
    <script>
        $(function () {
            // 读取 localStorage 中的数据
            var localStorageData = localStorage.getItem('NewsContent');
            // 从 localStorage 读取数据
            const myIP = localStorage.getItem('xiaoWeiWebsiteIP');
            console.log(myIP); // 输出: { key: 'value' }
            // 将数据赋值给隐藏的 textarea
            $('textarea').val(localStorageData);

            editor = editormd("editor", {
                path: "" + myIP + "/editor.md-master/lib/", // Editor.md库路径
                width: "100%",
                height: 500,
                syncScrolling: "single",
                saveHTMLToTextarea: true // 保存HTML到Textarea
            });


            //获取新闻图片链接
            $('.sourceMaterialImg').click(function () {
                // 获取图片的src属性值
                var imageUrl = $(this).attr('src');

                // 创建一个临时的输入元素
                var tempInput = $("<input>");
                $("body").append(tempInput);

                // 将图片链接复制到输入元素中
                tempInput.val(imageUrl).select();

                // 复制链接到剪贴板
                document.execCommand("copy");

                // 移除临时输入元素
                tempInput.remove();

                // 提示用户链接已复制
                alert("你已经成功复制素材 " + imageUrl);
            });
            
            // 存储新闻数据
            $('#get-text-btn').on('click', function () {
                // 获取编辑器内容
             var editorText = editor.getMarkdown();

                 // 获取新闻序号
                var newsId = $('.news-id ').text();

    // 使用 AJAX 发送数据到控制器方法
    $.ajax({
        url: '/admin/updateNewsContent',
        type: 'POST',
        data: {
            newsId: newsId,
            editorText: editorText
        },
        success: function (response) {
            // 处理成功响应
            console.log('成功了',response);
            alert("发布成功！");
            window.close(); 
        },
        error: function (error) {
            // 处理错误
        }
    });
            });
        });
    </script>
</body>
</html>
